<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/5/9
  Time: 23:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript">
        function doSerch(){
            // 1.创建xmlHttp对象
            var xmlHttp=new XMLHttpRequest();
            // 2.绑定事件
            xmlHttp.onreadystatechange=function (){
                // 获取响应数据 更新页面
                if (xmlHttp.readyState==4 && xmlHttp.status==200){
                    var date=xmlHttp.responseText;

                    var jsonobj=eval("("+date+")");
                    // 更新dom对象
                    // alert("data===="+date);
                    document.getElementById("proname").value=jsonobj.name;
                    document.getElementById("projiancheng").value=jsonobj.jiancheng;
                    document.getElementById("proshenghui").value=jsonobj.shenghui;
                }
            }
            // 3.初始化数据
            var data = document.getElementById("proid").value;
            alert(data);
            // true：异步请求： 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他操作
            // false:同步请求： 异步对象必须处理完请求，从服务端获取数据之后，才能执行send之后的代码，任意时刻，只能由一个对象在执行程序
            xmlHttp.open("get","queryServlet?proid="+data,true);

            // 4.发送请求
            xmlHttp.send();
            alert("send之后的代码")
        }
    </script>
</head>
<body>
<center>
        <p>ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号</td>
            <td><input type="text" id="proid">
                <input type="button" value="搜素" onclick="doSerch()">
            </td>
        </tr>
        <tr>
            <td>省份名称</td>
            <td><input type="text" id="proname"></td>
        </tr>
        <tr>
            <td>省份简称</td>
            <td><input type="text" id="projiancheng"></td>
        </tr>
        <tr>
            <td>省会名称</td>
            <td><input type="text" id="proshenghui"></td>
        </tr>

    </table>


</center>
</body>
</html>
